●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full landing/agency homepage: hero, about, portfolio grid, team cards, services, blog table and contact form.
- Interactive portfolio cards that open a MudDialog (ProjectDialog) with iframe/video/image content.
- Contact MudForm with MudTextField, MudSelect and MudDatePicker and validation using MudForm and DataAnnotations on ContactModel.
- Simple blog list rendered with MudSimpleTable and action buttons using MudButton.
- Reusable cards and avatars implemented with MudCard, MudCardMedia, MudCardContent, MudCardActions and MudAvatar.
- Navigation anchors and simple scroll/navigation logic via NavigationManager.
## Key components
- MudAppBar, MudPaper, MudGrid, MudItem
- MudCard, MudCardMedia, MudCardContent, MudCardActions
- MudDialog (ProjectDialog), IMudDialogInstance, IDialogService
- MudForm, MudTextField, MudSelect, MudSelectItem, MudDatePicker
- MudSimpleTable, MudButton, MudAvatar, MudIconButton, MudSnackbar (ISnackbar)
- @bind-Value, @bind-Date, @ref, @onclick
## How it works
- SampleData (DataModel.cs) provides in-memory lists for projects, team, services and posts; UI binds directly to these lists.
- Portfolio items call OpenProject which shows ProjectDialog via DialogService with DialogParameters; dialog displays iframe or image based on project data.
- Contact uses a MudForm reference (contactForm) bound to ContactModel with DataAnnotation attributes; SubmitContact calls contactForm.Validate() and checks IsValid before showing a Snackbar and resetting the form.
- Navigation uses injected NavigationManager and constructs fragment anchors for ScrollTo.
- UI interactions use MudBlazor event handlers (@onclick) and @bind-* for two-way binding.
## Styling
- Layout uses Tailwind-like utility classes (grid, flex, gap-*, px-*, text-*, md: prefixes) for responsive layout.
- Visual components, elevation and dialogs rely on MudBlazor components and theme settings; no custom CSS files are included in the sample.
- Responsiveness is handled by a mix of MudGrid/MudItem and Tailwind utilities (md:grid-cols-2, hidden md:block, etc.).
## Reuse steps
1. Add NuGet: MudBlazor; register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Include Tailwind utilities in the project or map the utility classes to existing CSS; ensure MudBlazor CSS is referenced.
3. Import namespaces (using MudBlazor) in _Imports.razor or components and inject IDialogService, ISnackbar, NavigationManager.
4. Copy SampleData models or adapt to backend models; add ProjectDialog component and wire DialogService.Show<T>().
5. Replace in-memory SubmitContact mock with an HTTP client service to POST ContactModel to a backend; handle errors and loading state.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI; it uses in-memory SampleData and mocked form submission (Snackbar). Backend persistence, authentication and APIs are not included.
- ProjectDialog embeds external iframes; sanitize and validate URLs before production use and consider CSP implications.
- Accessibility and i18n require review (French static strings present). Add ARIA attributes and keyboard focus management for dialogs.
- Extend with paging/search for the portfolio/blog, server-side data services, and server validation for the contact endpoint.